import { HashEventHandler } from 'listener'
import './index.less'
import MarketShow from './market'
import QueryRes from './queryRes'

export default class ModuleManager {
    public modules: HashEventHandler[] = [new MarketShow(), new QueryRes()]

    constructor() {
        setTimeout(() => {
            this.createTools()
        }, 3000)
    }

    /**
     * 创建工具箱
     */
    public createTools = () => {
        const navbar = document.querySelector('.navbar-resources')
        const tool = document.createElement('div')
        const toolHeader = document.createElement('div')
        const toolBox = document.createElement('ul')

        toolHeader.innerHTML = 'Keqing'
        this.modules.forEach((mod) => {
            if (mod.triggerPanel) {
                const li = document.createElement('li')
                li.innerHTML = mod.moduleName
                li.addEventListener('click', () => {
                    mod.triggerPanel()
                })
                toolBox.appendChild(li)
            }
        })

        tool.setAttribute('class', `--flex ng-scope keqing-tool`)
        toolHeader.setAttribute('class', `keqing-tool-header`)
        toolBox.setAttribute('class', `keqing-tool-box`)

        tool.appendChild(toolHeader)
        tool.appendChild(toolBox)

        tool.addEventListener('mouseover', () => {})
        navbar.prepend(tool)
    }
}
